<template>
  <div class="running-history">
    <Table ref="tableRef" :columns="columns" :data="loadData" :alert="false" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'buildNumber'">
          <a @click="handelDetial(record)">{{ record.buildNumber }}</a>
        </template>
        <template v-if="column.dataIndex === 'pipelineStatus'">
          <div class="running-status">
            <SvgIcon
              :name="pipelineStatusMap[record.pipelineStatus  as PipelineStatus].icon"
              :style="{ marginRight: '8px', color: pipelineStatusMap[record.pipelineStatus  as PipelineStatus].color }"
              :class="{ 'svg-rotate': record.pipelineStatus == PipelineStatus.running }"
            />
            <span :style="{ color: pipelineStatusMap[record.pipelineStatus  as PipelineStatus].color }">{{
              pipelineStatusMap[record.pipelineStatus as PipelineStatus].text
            }}</span>
          </div>
        </template>
        <template v-if="column.dataIndex === 'startTime'">{{ formatToDatetime(record.startTime) }}</template>
        <template v-if="column.dataIndex === 'endTime'">{{
          record.endTime ? formatToDatetime(record.endTime) : '--'
        }}</template>
        <template v-if="column.dataIndex === 'action'">
          <div class="table-operation">
            <a @click="handelDetial(record)">详情</a>
          </div>
        </template>
      </template>
    </Table>
  </div>
</template>

<script setup lang="ts">
import { getPipelineDevHistroy } from '@/api/pipeline';
import { pipelineStatusMap } from '@/settings/commonSettings';
import { PipelineStatus } from '@/enums/pipelineEnum';
import { formatToDatetime } from '@/utils/DateUtil';
const columns = [
  { dataIndex: 'buildNumber', title: '构建号', align: 'center', width: 100 },
  { dataIndex: 'pipelineStatus', title: '状态', align: 'center', ellipsis: true },
  { dataIndex: 'triggerTypeDisplayStr', title: '触发方式', align: 'center', ellipsis: true },
  { dataIndex: 'creator', title: '触发人', align: 'center', ellipsis: true },
  { dataIndex: 'remark', title: '运行备注', align: 'center', ellipsis: true },
  { dataIndex: 'duration', title: '持续时间', align: 'center', ellipsis: true },
  {
    dataIndex: 'startTime',
    title: '开始时间',
    align: 'center',
    ellipsis: true,
  },
  {
    dataIndex: 'endTime',
    title: '结束时间',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 160,
  },
];
const route = useRoute();
const tableRef = ref<any>('');

const loadData = async (parameter: any) => {
  const parameObj = {
    currentPage: parameter.current,
    pageSize: parameter.size,
    condition: {
      pipelineCode: route.params.code as string,
    },
  };
  const data = await getList(parameObj);
  return data;
};

//获取表格数据
const getList = async (parameObj: any) => {
  return await getPipelineDevHistroy(parameObj).then((res) => {
    const data = {
      total: res.totalCount,
      current: res.currentPage,
      pageSize: res.pageSize,
      records: res?.records || [],
    };
    return data;
  });
};
const emits = defineEmits(['goRunDetail']);
//表格详情
const handelDetial = async (record: any) => {
  emits('goRunDetail', record);
};
</script>

<style scoped lang="less">
.running-history {
  height: 100%;
  padding: 18px 20px;
}
.running-status {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
